<template>
  <div class="chart-box">
    <chart-topic header="全县养殖情况"></chart-topic>
    <div class="chart-tools">
      <div class="chart-tools-title">全县</div>
      <div class="chart-tools-select">
        <el-date-picker
          align="right"
          :append-to-body="false"
          size="mini"
          v-model="_value"
          type="month"
          @change="handleChange">
        </el-date-picker>
      </div>
    </div>
    <empty v-if="breedingList.length == 0"></empty>
    <div v-else class="chart-item" >
        <div class="chart-item-left" id="BreedSituationChart">
        </div>
        <div class="chart-item-right">
          <div class="breed-item-box" v-for="item in _list" :key="item.id">
            <img :src="item.icon" alt="" class="icon">
            <div>{{ item.dictType }}</div>
            <div>环比上月
              <img :src="item.isUp ?upIcon : downIcon" alt="" style="height: 10px;width: 13px;">
              <span :class="[item.isUp ? 'percentage': 'down-color']">{{ item.num }}</span>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import ChartTopic from '@/components/ChartTopic'
import upIcon from '@/assets/images/up-icon.png'
import downIcon from '@/assets/images/down-icon.png'
import cowUp from '@/assets/images/cow-up.png'
import cowDown from '@/assets/images/cow-down.png'
import sheepUp from '@/assets/images/sheep-up.png'
import sheepDown from '@/assets/images/sheep-down.png'
import chickenUp from '@/assets/images/chicken-up.png'
import chickenDown from '@/assets/images/chicken-down.png'
import pigDown from '@/assets/images/pig-down.png'
import pigUp from '@/assets/images/pig-up.png'
import donkeyUp from '@/assets/images/pig-up.png'
import donkeyDown from '@/assets/images/pig-up.png'
import resize from '@/views/dashboard/mixins/resize'
import Empty from '@/components/Empty';

export default {
  name: 'BreedSituation',
  mixins: [resize],
  components: {
    ChartTopic,
    Empty
  },
  props:{
    breedingList: {
      type:Array,
      default:() => []
    },
    value: {
      type: [String, Date],
      default: ''
    }
  },
  data() {
    return {
      upIcon,
      downIcon,
      chart: null,
      animalHusbandry: [],
      total: []
    }
  },
  watch: {
    breedingList: {
      handler(newVal) {
        if(newVal.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      }
    }
  },
  computed: {
    _value: {
      get() {
        return this.value
      },
      set(newVal) {
        this.$emit('update:value', newVal)
      }
    },
    _list() {
      return this.breedingList.map(item => {
        const { isUp, num, icon } = this.fomatData(item.husbandryType, item.compareUpMonth)
        return {
          ...item,
          icon,
          num,
          isUp
        }
      })
    }
  },
  // updated() {
  //   this.$nextTick(() => {
  //     this.initChart()
  //   })
  // },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('BreedSituationChart'))
      this.setOptions()
    },
    setOptions() {
      this.animalHusbandry = []
      this.total = []
      const data = this.breedingList.map( item => {
        return {
          value: item.total,
          itemStyle: {
            color: item.compareUpMonth?.replace('%',"") || 0 >= 0 ? '#9BFC2A' : '#FE942C'
          }
        }
      })
      this.breedingList.forEach( item => {
        this.animalHusbandry.push(item.dictType)
        this.total.push(item.total)
      });
      const option = {
        grid: {
          left: '1%',
          right: '9%',
          bottom: '7%',
          top: '4%',
          containLabel: true
        },
        tooltip: {
          transitionDuration:0,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          splitLine:{
            show:false
          },
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff',
              fontSize:10//这⾥⽤参数代替了
            }
          },
        },
        yAxis: {
          name:'养殖量（万头）',
          // interval:0,
          type: 'category',
          nameGap: 0,
          // data: ['肉驴', '蛋鸡', '肉鸡', '种猪', '肉猪', '奶羊','肉羊','奶牛','肉牛'],
          data: this.animalHusbandry,
          nameTextStyle: {
            color: '#ffffff',
            fontSize: 9
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'   //这⾥⽤参数代替了
            }
          }
        },
        series: [
          {
            name: '万头',
            center: ['50%', '50%'],
            barWidth: 6,
            type: 'bar',
            data
          }
        ]
      }
      this.chart.setOption(option);
    },
    handleChange(val) {
      this.$emit('change', val);
    },
    fomatData(husbandryType, compareUpMonth) {
      const { isUp, num } = this.checkCompareUpMonth(compareUpMonth)
      const husbandryMap = {
        1: isUp ? cowUp : cowDown,
        2: isUp ? cowUp : cowDown,
        3: isUp ? sheepUp : sheepDown,
        4: isUp ? sheepUp : sheepDown,
        5: isUp ? pigUp : pigDown,
        6: isUp ? pigUp : pigDown,
        7: isUp ? chickenUp : chickenDown,
        8: isUp ? chickenUp : chickenDown,
        9: isUp ? donkeyUp : donkeyDown,
        10: isUp ? donkeyUp : donkeyDown,
      }
      return {
        isUp,
        num,
        icon: husbandryMap[husbandryType] ? husbandryMap[husbandryType] : ''
      }
    },
    checkCompareUpMonth(compareUpMonth) {
      const num = parseFloat(compareUpMonth) || 0
      return {
        isUp: num >= 0,
        num: num ? Math.abs(num).toFixed(2) + '%' : num + '%'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-box {
  ::v-deep .el-input__inner{
    width: 1.35rem;
    height: 0.3rem;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color:#bfc3cb;
  }
}
::v-deep.el-date-editor{
  width: 1px;
}
</style>
<style scoped lang="scss">
.chart-tools-title {
  position: relative;
  padding-left: 0.15rem;

  &:before {
    content: '';
    background: #45FFB7;
    width: 0.1rem;
    height: 0.1rem;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: calc(50% - 0.03rem);
  }
}
.chart-box {
  height: 100%;
  display: flex;
  flex-direction: column;

  .chart-item {
    flex: 1;
    overflow: hidden;
    vertical-align: top;
    display: flex;


    .chart-item-left, .chart-item-right {
      display: inline-block;
      width: 50%;
      height: 100%;
      vertical-align: top;
    }
    .chart-item-left {
      height: 100%;
      margin-top: 0.1rem;
    }
    .chart-item-right {
      height: 100%;
      overflow: auto;
      border-left:0.01rem solid ;
      border-image: linear-gradient( transparent, #33D2C7, transparent) 30 30;;

      .breed-item-box {
        padding: 0.15rem;
        display: inline-block;
        width: 50%;
        height: 25%;
        text-align: center;
        .icon {
          width: 0.5rem;
          height: 0.4rem;
        }
        div {
          font-size: 0.15rem;
          text-align: center;
        }
      }
    }
  }
}

.breed-situation-chart-line {
  height: 100%;
  width: 0.01rem;
  background-image: linear-gradient(rgba(0, 204, 159, 0.2), rgba(0, 204, 159, 1), rgba(0, 204, 159, 0.2));
}

.breed-item {
  height: 25%;
}

.chart-tools {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.07rem;
  font-size: 0.02rem;

  .chart-tools-select{
    width: 1.28rem;
  }
}

::-webkit-scrollbar {
  display: none
}
.percentage {
  color: rgba(32, 209, 94, 1);
}

.down-color {
  color: rgba(253, 78, 78, 1)
}
</style>

